<template>

  <div>   
        <Header :title_="title_"></Header>
        <div class="scrollwarp" :style='{ height }'>
            <Loading v-if="this.disitems.length<1"></Loading>
            <Disitems :disitems="disitems" else></Disitems>
        </div>
  </div>

</template>

<script>
//引入加载中
import Loading from "@/components/Loading/loading"
import BetterScroll from "better-scroll";
import Header from '@/components/Header/Header'
import Disitems from '@/components/Discountitems/Disitems2'
export default {
    data () {
        return {
            title_: "潮流",
            disitems:[],
            height:0,
            //滚动对象
            scroll:null,
        }
    },
    components: {
        Header,
        Disitems,
        Loading
    },
    mounted() {
        let url = "http://localhost:8080/data/Trend.json";
        this.$axios.get(url).then((ret) => {
        // console.log(ret.data);
        this.disitems = ret.data;
        //   console.log(this.disitems);
        });
        // 外层滚动容器高度
        this.height = document.documentElement.clientHeight - 48 + 'px'
        // console.log(this.height);
    
    },
    beforeDestroy(){
        this.scroll = null;
    },
    updated() {
        this.$nextTick(()=>{
            this.scroll = new BetterScroll('.scrollwarp',{
                click: true,
            })
        })
    }
}
</script>

<style lang="scss" scoped>
.scrollwarp {
  // width: 100%;
  overflow: hidden;
}
</style>